<Select TItem="Person"
        TItemValue="int?"
        DataSource="@_list"
        @bind-Value="@_selectedValue"
        ValueName="@nameof(Person.Id)"
        LabelName="@nameof(Person.Name)"
        Placeholder="custom dropdown render"
        OnSelectedItemChanged="OnSelectedItemChangedHandler"
        Style="width: 240px;">
    <DropdownRender Context="originNode">
        <div>
            @originNode
            <Divider Style="margin: 4px 0"></Divider>
            <div style="display: flex; flex-wrap: nowrap; padding: 8px">
                <Input Style="flex: auto" @bind-Value="@_name" />
                <a style="flex: none; padding: 8px; display: block; cursor: pointer" @onclick="AddItem">
                    <Icon Type="@IconType.Outline.Plus" />
                    Add Item
                </a>
            </div>
        </div>
    </DropdownRender>
</Select>
<br />
<br />
<p>
    Selected Value: @_selectedValue <br />
    Selected Item Name: @_selectedItem?.Name
</p>

@code
{
    class Person
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    List<Person> _list;
    int? _selectedValue;
    Person _selectedItem;
    string _name = string.Empty;

    protected override void OnInitialized()
    {
        _list = new List<Person>
        {
            new Person {Id = 1, Name = "Jack"},
            new Person {Id = 2, Name = "Lucy"}
        };
    }

    private void OnSelectedItemChangedHandler(Person value)
    {
        _selectedItem = value;
    }

    private void AddItem(MouseEventArgs args)
    {
        if (!string.IsNullOrWhiteSpace(_name))
        {
            int newId = _list.Count() + 1;
            _list.Add(new Person { Id = newId, Name = _name });
            _name = string.Empty;
        }
    }
}
